<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>云收藏</title>
	<base target="_blank">
	<script src="http://47.106.66.89:8080/js/vue.min.js"></script>
	<script src="http://47.106.66.89:8080/js/axios.min.js"></script>
	<link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
	<script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
</head>
<body>
<div id="app">
	<el-container>
		<el-header class="title">
			<div class="c900 flex">
				<el-link :underline="false" href="index.html">
					<h1>云收藏</h1>
				</el-link>
				<el-input style="width: auto" placeholder="请输入搜索关键字">
					<el-button slot="append" icon="el-icon-search"></el-button>
				</el-input>
				<div class="flex">
					<el-avatar src="https://img1.baidu.com/it/u=681713666,1923984648&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500"></el-avatar>
					<el-link>注册</el-link>
					<el-link>登录</el-link>
				</div>
			</div>
		</el-header>
		<el-main>
			<div class="c900 h100">
				<el-container class="h100">
					<el-aside class="h100">
						<el-menu class="h100" default-active="2" @select="filterFav">
							<el-menu-item index="a1">
								<el-button type="primary" @click="showEdit=true">新增</el-button>
							</el-menu-item>
							<el-menu-item index="a2">
								<span>全部 ({{fdata.allFavs.length}})</span>
							</el-menu-item>
							<el-menu-item index="a3">
								<span>未分类 ({{fdata.allFavs.filter(f=>f.tags.length == 0).length}})</span>
							</el-menu-item>
							<el-menu-item v-for="item in fdata.tags" :index="item.id">
								<div class="flex">
									<span>{{item.name}} ({{fdata.tagFavs.filter(t=>t.tid == item.id).length}})</span>
									<el-button type="text">合并至</el-button>
								</div>
							</el-menu-item>
							<el-menu-item index="a4">
								<span>云图</span>
							</el-menu-item>
						</el-menu>
					</el-aside>
					<el-main>
						<el-card v-for="item in fdata.favs">
							<div slot="header" class="flex">
								<div class="flex">
									<el-link :href="item.addr" :underline="false">
										<div class="flex">
											<img :src="item.image||noImage">
											<h3>{{item.name}}</h3>
											{{item.addr}}
										</div>
									</el-link>
									<small>访问量:{{item.opens||0}}</small>
								</div>
								<div>
									<el-button type="text">置顶</el-button>
									<el-button type="text" @click="Object.assign(fav,item);showEdit = true;">修改</el-button>
									<el-button type="text" @click="delFav(item.id)">删除</el-button>
								</div>
							</div>
							<div>
								<el-tag size='mini' v-for="tag in (item.tags.split(/[;；\s]+/))">{{tag}}</el-tag>
							</div>
							<p>{{item.intro}}</p>
						</el-card>
					</el-main>
				</el-container>
			</div>
		</el-main>
		<el-footer class="flex title" style="justify-content: center;height: 30px">
			<a href="http://www.hyycinfo.com" target="_blank">源辰信息科技</a>
		</el-footer>
	</el-container>
	<el-dialog title="添加网址" :visible.sync="showEdit">
		<el-form>
			<el-form-item label="名称:" label-width="50px" >
				<el-input autocomplete="off" placeholder="网站名称" v-model="fav.name"></el-input>
			</el-form-item>
			<el-form-item label="地址:" label-width="50px">
				<el-input autocomplete="off" placeholder="输入http开头的网页地址" v-model="fav.addr" @change="change"></el-input>
			</el-form-item>
			<el-form-item label="分类:" label-width="50px">
				<el-input autocomplete="off" placeholder="每个分类用 ; 号隔开, 例如: 游戏;新闻" v-model="fav.tags"></el-input>
			</el-form-item>
			<el-form-item label="图片:" label-width="50px">
				<el-input autocomplete="off" placeholder="输入http开头的网图片地址">
					<el-upload slot="append">
						<el-button>上传图片</el-button>
					</el-upload>
				</el-input>
			</el-form-item>
			<el-form-item label="描述:" label-width="50px">
				<el-input autocomplete="off" type="textarea" :rows="3" placeholder="输入网站说明, 不超出200个字" v-model="fav.intro"></el-input>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="showEdit = false">取 消</el-button>
			<el-button type="primary" @click="showEdit = false; addFav()">确 定</el-button>
		</div>
	</el-dialog>
</div>
</body>
<script>
	var v = new Vue({
		el:"#app",
		data:{
			showEdit: false,
			fav:{
				name:"",
				addr:"",
				tags:"",
				intro:"",
				image:""
			},
			fdata:{
				favs:[],
				tags:[],
				tagFavs:[]
			},
			noImage:"https://img0.baidu.com/it/u=447433031,4160304780&fm=253&fmt=auto&app=138&f=JPEG?w=285&h=300"
		},
		created() {
			this.query();
		},
		methods : {
			delFav(id){
				console.log("aaaaa");
				let p = new URLSearchParams();
				p.append('id',id)
				axios.post(
						"delFav",
						p
				).then(resp=>{
					if(resp.data.code>0){
						this.$message(resp.data.msg);
					}else {
						this.$alert(resp.data.msg);
					}
				});
			},
			change(addr){
				let p = new URLSearchParams();
				p.append('addr',addr)
				axios.post(
						"pageinfo",
						p
				).then(resp=>{
					this.fav.name = resp.data.title;
					this.fav.intro = resp.data.description;
					this.fav.tags = (resp.data.keywords).replaceAll(',',';');

				});
			},
			filterFav(index,indexPath){
				console.log(index);
				if(index == 'a2'){
					this.fdata.favs = this.fdata.allFavs;
				}else if(index == 'a3'){
					this.fdata.favs = this.fdata.allFavs.filter(f=>f.tags.length==0);
				}else if(index == 'a1'){
					return;
				}else if(index == 'a4'){
					return;
				}else{
					this.fdata.favs = this.fdata.tagFavs
							.filter(tf=>tf.tid == index).map(tf=>{
								let arr = this.fdata.allFavs.filter(f=> f.id == tf.fid);
								return arr[0];
							});
				}
			},
			query(){
				axios.post(
						"queryTagFav"
				).then(resp=>{
					this.fdata = resp.data.data;
					this.fdata.allFavs = [];
					this.fdata.allFavs = this.fdata.allFavs.concat(this.fdata.favs);
				});
			},
			addFav(){
				let p = new URLSearchParams();
				for (let addFavKey in this.fav) {
					p.append(addFavKey,this.fav[addFavKey])
				}
				axios.post(
						"addFav",
						p
				).then(resp=>{
					if (resp.data.code == 1){
						this.$message(resp.data.msg);
					}else if(resp.data.code == 2){
						this.$message(resp.data.msg);
					}else if(resp.data.code == -1){
						this.$alert(resp.data.msg);
					}else if(resp.data.code == -2){
						this.$alert(resp.data.msg);
					}
				});
			}
		}
	});
</script>
<style>
	html,body{
		margin: 0px;
		padding: 0px;
	}
	#app>.el-container>.el-main{
		overflow-x: hidden;
		background-image: url("https://img2.baidu.com/it/u=2076726300,191426335&fm=253&fmt=auto?w=500&h=500");
		background-size: cover;
	}
	.el-main{
		padding: 0px 10px;
	}
	.el-card{
		margin-top: 10px;
	}
	html,body,#app,#app>.el-container{
		height: 100%;
	}
	*{
		transition: all .5s;
	}
	a{
		text-decoration: none;
	}
	.c900{
		width: 1000px;
		margin: auto;
	}
	.title{
		background-color: #0a699999;
		color: #fff;
	}
	.title *{
		color: #fff;
	}
	.flex{
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100%;
		gap: 10px;
	}
	.flex>*{
		margin: 0px;
		padding: 0px;
	}
	.center{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	nav{
		display: flex;
		height: 100%;
	}
	nav .el-link{
		padding-inline: 20px;
		font-size: 1em;
	}
	nav .el-link:hover{
		background-color: #99f7;
	}
	img{
		width: 40px;
		height: 40px;
		object-fit: cover;
	}
	.hsc:hover{
		transform: scale(1.1);
		box-shadow: 3px 3px 3px 3px #8888;
	}
	.grid2{
		display: grid;
		grid-template-columns: auto auto;
	}
	.grid3{
		display: grid;
		grid-template-columns: auto auto auto;
	}
	.grid4{
		display: grid;
		grid-template-columns: auto auto auto auto;
	}
	.h100{
		height: 100%;
	}
	small{
		font-size: .7em;
		color: #989
	}
</style>

</html>